<template>
	<view>
	<view class="content">
		<!-- 顶部搜索框和轮播图 -->
		<view class="top_bg">
			 <view class="search_item">
				<view class="input_area" @tap="goSearch()">
					<view class="input_icon">
						<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/shousuo%402x.png"></image>
					</view>
					<view class="input_text">
						搜索您喜欢的商品
					</view>
				</view>
				<view class="search_taps">
					<view>
						<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/saoyisao%402x.png"></image>
					</view>
					<view>
						<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/xinxi%402x.png"></image>
					</view>
				</view>
			</view> 
			<view class="swiper_area">
				<uni-swiper-dot class="swiper_item">
					<swiper class="swiper-box">
						<swiper-item v-for="(item ,index) in banners" :key="index" >
							<view :class="item.colorClass" class="swiper-item">
								<image class="swiper_img" src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/meishibanner.png" mode="aspectFill" />
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
		</view>
       
		<!-- 商城分类 -->
		<view class="shop_swiper">
			<uni-swiper-dot class="shop_swiper_item">
				<swiper class="shop_swiper_box"  @change="change">
					<swiper-item class="swiper_box" >
						<view @tap="goBaoming()" class="shop_tap" >
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/canjiahuodong.png"></image>
							<view>活动参与</view>
						</view>
						<view @tap="goAssemble()" class="shop_tap" >
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/VR%402x.png"></image>
							<view>拼团服务</view>
						</view>
						<view @tap="enterRentalSer()" class="shop_tap" >
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/fenlei%402x.png"></image>
							<view>租赁服务</view>
						</view>
					<!-- 	<view @tap="goMine()" class="shop_tap" >
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/fenlei%402x.png"></image>
							<view>我的</view>
						</view> -->
						<!-- <view class="shop_tap">
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/zhengpin%402x.png"></image>
							<view>臻品mall</view>
						</view>
						<view class="shop_tap">
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/VR%402x.png"></image>
							<view>商圈</view>
						</view>
						<view class="shop_tap">
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/zhibo%402x.png"></image>
							<view>直播</view>
						</view>
						<view class="shop_tap" @tap="goBaoming()">
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/canjiahuodong.png"></image>
							<view>活动参与</view>
						</view>
						<view class="shop_tap" @tap="goShare()">
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/fenxiang.png"></image>
							<view>分享</view>
						</view>
						<view class="shop_tap">
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/qiandao%402x.png"></image>
							<view>签到领U点</view>
						</view>
						<view class="shop_tap">
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/meizhuang%402x.png"></image>
							<view>美妆洗护</view>
						</view>
						<view class="shop_tap">
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/shenghuo%402x.png"></image>
							<view>生活日百</view>
						</view>
						<view class="shop_tap">
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/yifu%402x.png"></image>
							<view>服装鞋帽</view>
						</view>
						<view class="shop_tap">
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/fenlei%402x.png"></image>
							<view>品牌分类</view>
						</view> -->
						
					</swiper-item>
					<!-- <swiper-item class="swiper_box">
						<view class="shop_tap">
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/xiangbao%402x.png"></image>
							<view>箱包配件</view>
						</view>
						<view class="shop_tap">
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/muying%402x.png"></image>
							<view>母婴亲子</view>
						</view>
						<view class="shop_tap">
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/shipin.png"></image>
							<view>食品保健</view>
						</view>
						<view class="shop_tap">
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/chongwu.png"></image>
							<view>宠物用品</view>
						</view>
						<view class="shop_tap">
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/huwai.png"></image>
							<view>户外运动</view>
						</view>
						<view class="shop_tap">
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/shoushi.png"></image>
							<view>首饰珠宝</view>
						</view>
						<view class="shop_tap">
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/shuma.png"></image>
							<view>数码电器</view>
						</view>
						<view class="shop_tap" @tap="enterRentalSer()">
							<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/fenlei%402x.png"></image>
							<view>租赁服务</view>
						</view>
					</swiper-item> -->
				</swiper>
			</uni-swiper-dot>
			<!-- <view class="banner_area">
				<view class="banner_item" v-if="ban">
					<view class="banner_active"></view>
					<view class=""></view>
				</view>
				<view class="banner_item" v-if="!ban">
					<view class=""></view>
					<view class="banner_active"></view>
				</view>
			</view> -->
		</view>
		

		<!-- 推荐商品 -->
		<!-- <view class="tuijian_area">
			<view class="tuijian_box" @tap="goMiaosha()">
				<view class="tuijian_tittle">每日秒杀</view>
				<view class="tuijian_img">
					<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/Group%208%402x.png"></image>
				</view>
			</view>
			<view class="tuijian_box">
				<view class="tuijian_tittle">大牌好物</view>
				<view class="tuijian_img">
					<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/Group%2010%402x.png"></image>
				</view>
			</view>
			<view class="tuijian_box">
				<view class="tuijian_tittle">每日上新</view>
				<view class="tuijian_img">
					<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/Group%2011%402x.png"></image>
				</view>
			</view>
			<view class="tuijian_box">
				<view class="tuijian_tittle">品质生活</view>
				<view class="tuijian_img" @tap="goShenghuo()">
					<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/Group%2012%402x.png"></image>
				</view>
			</view>
		</view>
 -->
		<!-- vr商城 -->
		<view class="vr_tittle">
			<view class="line-lr"></view>
			<view class="line-c">VR逛商城</view>
			<view class="line-lr"></view>
		</view>

		<!-- vr -->
		<view class="vr_area">
			<view class="vr-box"  v-for="(item,index) in shopMallDatas"   id='item.view_url'>
				<view class="vr_name" >{{item.name}}</view>
				<image :src="item.thumb"></image>
				<view class="vr_look" :id="item.view_url" @tap="enterShopMall($event)">立即查看</view>
			</view>
		</view>
		
	  </view>
	  
	 <view class='per_share' v-if='isShare==1'>
	 	<view class='shareView'>
	 		<view class='titleShare'>为了更好的为您服务,需要您授权获取信息</view>
	 		<!-- #ifdef MP-WEIXIN -->
	 		      <button class='bnt_index' type="primary" open-type="getUserInfo" @getuserinfo="mpGetUserInfo">确认</button>
	 		<!-- #endif -->
	 	</view>
	 </view>
	 
	 <view class='per_share' v-if='isShare==2'>
	 	<view class='shareView'>
	 		<view class='titleShare'>为了更好的为您服务,需要您授权</view>
	 		<!-- #ifdef MP-WEIXIN -->
	 		     <button class='bnt_index' open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">确认</button>
	 		<!-- #endif -->
	 	</view>
	 </view>
				
	  
  </view>
</template>

<script>
	import http from '../../common/http.js'
	import common from '../../common/common.js'
	import config from '../../common/config.js'
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	export default {
		components: {
			uniSwiperDot
		},
		data() {
			return {               
				// 轮播图
				banners: [],
				bannerArr:[],
				shopMallDatas:[],
				ban: true,
				current:'',
				isShare:""
			}
		},
		onLoad:function() {
			this.getBanner();
			this.getShopMall();
			//uni.removeStorageSync('userToken');
			//uni.removeStorageSync('openid');
			let Token =  uni.getStorageSync('userToken');
			console.log(Token)
			if(Token==""){//去登陆
				this.tologin();
			} 
			uni.getLocation({//获取经纬度
				type: 'wgs84',
				success: function(res) {
					uni.setStorageSync('lon', res.longitude);
					uni.setStorageSync('lat', res.latitude);
				}
			});
			
		},
		onShow() {
			this.isShare="";
		},
		methods: {
			getUserInfos() {
				uni.request({
					url: this.apiUrl + '/api/user/selectUser',
					method: 'POST',
					contentType: 'application/jason',
					data: {
						userName:uni.getStorageSync('userName'),
						userPhone:uni.getStorageSync("userPhone"),
						openid:uni.getStorageSync("openid")
					},
					success: res => {
						
					}
				});
			},
			goSearch() {
				uni.navigateTo({
					url: '../goods/goods-search/goods-search'
				});
			},
			goAssemble(){
				uni.navigateTo({
					url: '../assemblePro/assembleIndex/assembleIndex'
				});
			},
			goMine(){
				uni.navigateTo({
					url: '../assemblePro/assembleMine/assembleMine'
				});
			},
			goBaoming() {
				
				uni.navigateTo({
					url: '../meetings/meetings'
				});
			},
			goShare(){
				uni.navigateTo({
					url: '../baoming/moban-one'
				});
			},
			enterRentalSer(){
				uni.navigateTo({
					url: '../baoming/rentalServices'
				});
			},
			change(e) {
				this.current = e.detail.current
				if(this.current == 0){
					this.ban = true
				}else if(this.current == 1) {
					this.ban = false
				}
			},
			goMiaosha(){
				uni.navigateTo({
					url: '../goods/goods-miaosha/goods-miaosha'
				})
			},
			goShenghuo() {
				uni.navigateTo({
					url:'../goods/goods-info/goods-info'
				})
			},
			enterShopMall(e){//进入vr实景页面
				let webUrl =e.currentTarget.id;
				console.log("index"+webUrl);
				uni.navigateTo({ 
					url:"../baoming/shopMall?weburl="+encodeURIComponent(webUrl)
				}) 
			},
			getBanner(){//获取banner
			      var that=this;
			      let params ={};
			      //请求后台接口 获取openid 和session_id
			       wx.request({
			      			url:config.ujqUrl1+'store/api/uplus/v1/banners',
			      			method: 'GET',
			      			data:params,
			      			header:{},
			      			success: function(res) {//如果未注册调用getPhone ，返回unionid、openId、session_key  根据有无token来判断
			      				var datas =res.data.data;
			      				console.log(datas);
			      				that.banners=datas;
			      			},
			      			fail: function(err) {
			      				console.log(err)
			      			}
			      	})

			},
		   getShopMall(){//初始化获取VR逛商城&品牌数据
				var that=this;
				let params ={};
				//请求后台接口 获取openid 和session_id
				 wx.request({
							url:'https://vr.ujquan.com/mobile?act=vrlist&page=1&size=10',
							method: 'POST',
							data:params,
							header:{},
							success: function(res) {//如果未注册调用getPhone ，返回unionid、openId、session_key  根据有无token来判断
								var datas =res;
								console.log(res.data.list);
								that.shopMallDatas=res.data.list;
							},
							fail: function(err) {
								console.log(err)
							}
					}) 
		   },
		   tologin(){//用户登录 获取code
		       var that =this;
			   uni.login({
					  provider: "weixin",
					  // #ifdef MP-ALIPAY
					  scopes: 'auth_user',  //支付宝小程序需设置授权类型
					  // #endif
					success: (res) => {
						uni.setStorageSync('code', res.code);
						that.isShare=1;
					},
					fail: (err) => {
						console.log('login fail:', err);
					}
				});
		   },
		   mpGetUserInfo(result) {//获取用户信息
		        console.log(common.ujqAppid);
		        var that =this;
				if (result.detail.errMsg !== 'getUserInfo:ok') {
					uni.showModal({
						title: '获取用户信息失败',
						content: '错误原因' + result.detail.errMsg,
						showCancel: false
					});
					return;
				}
				let params ={
							appid:common.appid,
							api_version:common.apiversion,
							timestamp:common.timestamp,
					        js_code:uni.getStorageSync("code"),
							wx_appid:common.ujqAppid,
							iv:result.detail.iv,									
							encrypted_data:result.detail.encryptedData										
							};
					console.log(params);
				 let signStr = common.sign(params);
				 params.sign = signStr;
				//请求后台接口 获取openid 和session_id
				 wx.request({
							url:config.assembleUrl+'/common/user/login-by-js-code',
							method: 'POST',
							data:params,
							header:{
								 'content-type':'application/x-www-form-urlencoded',
								},
							success: function(res) {//如果未注册调用getPhone ，返回unionid、openId、session_key  根据有无token来判断
								var datas =res.data.data;
								console.log("用户信息");
								console.log(res);
								console.log(uni.getStorageSync('openid'));
								if((datas.token==undefined)||(datas.token=="")){//用户未注册 小程序调用getPhone  
									uni.setStorageSync('openid', datas.openid);
									uni.setStorageSync('session_key', datas.session_key);
									uni.setStorageSync('unionid', datas.unionid);
									that.isShare=2;
								}else{//用户已注册 登录成功
									that.isShare="";
									var phone=datas.phone;
									var userName =datas.name;
									var userToken =datas.token;
									var userSex =datas.sex;
									var userImg =datas.img;
									uni.setStorageSync('userPhone', phone);
									uni.setStorageSync('userName', userName);
									uni.setStorageSync('userToken', userToken);
									uni.setStorageSync('userSex', userSex);
									uni.setStorageSync('userImg', userImg);
									that.getUserInfos();
								} 
							},
							fail: function(err) {
								console.log(err)
							}
					}) 
		   },
		   onGetPhoneNumber(e) {//获取手机号  
		         var that =this;
		         console.log(e);//获取iv、encryptedData
		         if (e.detail.errMsg =="getPhoneNumber:fail user deny") {
		           wx.showModal({
		             title:"提示",
		             showCancel:false,
		             content:"未授权",
		             success:function(res) {}
		           });
		         }else {
		           wx.showModal({
		             title:"提示",
		             showCancel:false,
		             content:"同意授权",
		             success:function(res) {
						 console.log(res);
						 let params = {
								appid:common.appid,
								api_version:common.apiversion,
								timestamp:common.timestamp,
								js_code: res.code,
								wx_appid:common.ujqAppid,
								union_id:uni.getStorageSync("unionid"),
						 		open_id:uni.getStorageSync("openid"),
						 		iv:e.detail.iv,
						 		session_key: uni.getStorageSync("session_key"),											
						 		encrypted_data:e.detail.encryptedData,											
						 	};
						 let signStr = common.sign(params);
						 params.sign = signStr;
						 wx.request({
						   url:config.assembleUrl+"common/user/reg-by-union-id",
						   data:params,
						   header:{
						   	 'content-type':'application/x-www-form-urlencoded',
						   	},
						   success: res => {
							 console.log("res");
						     console.log(res);
							 that.isShare="";
							 var datas =res.data.data;
							 var phone=datas.phone;
							 var userName =datas.name;
	                         var userToken =datas.token;
		                     var userSex =datas.sex;
							 var userImg =datas.img;
							
							 uni.setStorageSync('userPhone', phone);
							 uni.setStorageSync('userName', userName);
							 uni.setStorageSync('userToken', userToken);
							 uni.setStorageSync('userSex', userSex);
							 uni.setStorageSync('userImg', userImg);
							 that.getUserInfos();
						   },fail: res => {
							    that.isShare="";
								console.log("fail"+res)
						    }
						 });
		             }
		           });
		         }
		       }
		},
		mounted(){
			this.getBanner();
			this.getShopMall();
		},
		computed:{
		   memberData:function(){
		      return this.$store.state.hasLogin;
		   },
		},
		
	}
</script>

<style>
	page {
		background: rgba(245, 245, 245, 1);
	}
   
	.content {
		width: 100%;
		height: 100%;
		padding-bottom: 10px;
	}

	.banner_area {
		height: 10px;
		width: 100%;
		position: relative;
		margin-top: -13px;
	}
	
	.banner_item {
		margin: 0 auto;
		height: 2px;
		width: 34px;
		border-radius: 1px;
		display: flex;
		background:rgba(237,237,237,1);
	}
	
	.banner_item view {
		width: 50%;
		height: 100%;
	}
	
	.banner_active {
		background:rgba(254,67,56,1);
	}

	.top_bg {
		padding-top: 5px;
		width: 100%;
		height: 110px;
		background: rgba(254, 45, 57, 1);
	}

	.search_item {
		width: 100%;
		height: 32px;
		display: flex;
	}

	.input_area {
		width: 70%;
		height: 32px;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 32px;
		margin-left: 15px;
		display: flex;
	}

	.search_taps {
		width: 25%;
		height: 32px;
		display: flex;
	}

	.search_taps view {
		width: 25px;
		height: 25px;
		margin-left: 16px;
		margin-top: 4px;
	}

	.search_item view image {
		width: 100%;
		height: 100%;
	}

	.input_icon {
		width: 32px;
		height: 32px;
		margin-left: 3px;
	}

	.input_text {
		height: 32px;
		line-height: 32px;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.swiper_area {
		width: 94.6%;
		height:246upx;
		background-color: #555555;
		margin: 5px auto;
		border-radius: 10px;
		box-shadow: 0px 8px 20px 0px rgba(153, 153, 153, 0.2);
	}
	.swiper-box{
		width:100%;
		height:246upx;
	}

	.swiper_item {
		width: 100%;
		height: 246upx;
		border-radius: 10px;
	}

	.swiper_img {
		float:left;
		width: 100%;
		height:246upx;
	}

	.shop_swiper {
		display: absolute;
		width: 95%;
		height: 190px;
		margin: 0 auto;
		margin-top: 25px;
		border-radius: 10px;
		box-shadow: 0px 8px 20px 0px rgba(153, 153, 153, 0.2);
		background: rgba(255, 255, 255, 1);
	}
	.shop_swiper_item {
		width: 100%;
		height: 190px;
		border-radius: 10px;
	}

	.swiper_box {
		width: 100%;
		height: 190px;
		border-radius: 10px;
		background: rgba(255, 255, 255, 1);
		display: flex;
		flex-wrap: wrap;
	}

	.shop_swiper_box {
		height: 190px !important;
	}

	.shop_tap {
		width: 20%;
		height: 84.5px;
		text-align: center;
	}

	.shop_tap image {
		width: 45px;
		height: 45px;
		margin-top: 12px;
	}

	.shop_tap view {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 12px;
	}

	.tuijian_area {
		width: 94.6%;
		height: 118px;
		border-radius: 10px;
		background: rgba(255, 255, 255, 1);
		margin: 0 auto;
		margin-top: 10px;
		display: flex;
		box-shadow: 0px 8px 20px 0px rgba(153, 153, 153, 0.2);
	}

	.tuijian_box {
		width: 25%;
		height: 118px;
	}

	.tuijian_tittle {
		width: 100%;
		height: 36px;
		line-height: 36px;
		font-size: 16px;
		padding-left: 3px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		text-align: center;
	}

	.tuijian_img {
		border-radius: ;
		width: 75px !important;
		height: 75px !important;
		margin: 0 auto;
	}

	.tuijian_img image {
		width: 100%;
		height: 100%;
	}

	.vr_tittle {
		width: 108px;
		height: 36px;
		display: flex;
		margin: 0 auto;
	}

	.line-lr {
		width: 15px;
		height: 1px;
		background-color: #111111;
		margin-top: 17px;

	}

	.line-c {
		width: 77.5px;
		height: 36px;
		line-height: 36px;
		text-align: center;
		font-size: 15px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(17, 17, 17, 1);
	}

	.vr_area {
		width: 94.6%;
		height: 100%;
		margin: 0 auto;
	}

	.vr-box {
		height: 150px;
		width: 100%;
		border-radius: 10px;
		background-color: #FFFFFF;
		margin-bottom: 10px;
		position: relative;
		box-shadow: 0px 8px 20px 0px rgba(153, 153, 153, 0.2);
	}

	.vr_name {
		position: absolute;
		font-size: 18px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 16px;
		margin-top: 20px;
		margin-left: 10px;
		z-index: 10;
	}

	.vr-box image {
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}

	.vr_look {
		position: absolute;
		bottom: 10px;
		right: 10px;
		z-index: 3;
		width: 78.5px;
		height: 26px;
		border-radius: 14px;
		text-align: center;
		background: rgba(254, 67, 56, 1);
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 26px;

	}
	.per_share{
		width:100%;
		height:100%;
		position: fixed;
		top:0px;
		left:0px;
		z-index:99998;
		background:rgba(38,38,38,0.4);
	}
	.shareView{
		width:80%;
		height:40%;
		position:fixed;
		left:10%;
		top:100px;
		z-index:99999;
		background:#fff;
		box-shadow:5px 5px 10px #aaa out;
		border-radius:10px;
	}
	.titleShare{
		width:100%;
		position:absolute;
		top:60px;
		text-align: center;
	}
	.shareBtn{
		width:80%;
		height:40px;
		position:absolute;
		left:10%;
		top:120px;
		background:#1aad19;
		color:#fff;
		border:none;
	}
	.bnt_index{
		width:80%;
		position:absolute;
		left:10%;
		bottom:20px;
	}
</style>
